<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="../vue.js"></script>
</head>
<body>
<div id="app">

  <h1>{{msg}}</h1>

  <span>请输入你想要查找的动漫名称:</span><input type="text" v-model="search">
  <ul>
    <li v-for="(i,n) in newAnime" :key="i.id">{{n+1}}.&nbsp;&nbsp;动漫名称:{{i.animeName}}----->作者:{{i.author}}</li>
  </ul>
  <button @click="upSort">升序</button>
  <button @click="downSort">降序</button>

</div>

<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el:'#app',
    data(){
      return{
        msg:'hello Vue~~~',
        anime:[
          {id:'001',animeName:'名侦探柯南',author:'青山刚川'},
          {id:'002',animeName:'OverLord',author: '丸山'},
          {id:'003',animeName: '斗罗大陆',author: '三少'},
          {id:'004',animeName: '斗罗大陆2:绝世唐门',author: '三少'},
          {id:'005',animeName: '神印骑士',author: '三少'},
          {id:'006',animeName: '妖精的尾巴',author: '真岛树'}
        ],
        // newAnime:[],
        search:''
      }
    },
    //采用监听的方法来实现动态查找
    // watch:{
    //   search: {
    //     immediate: true,
    //     handler(newSearch){
    //     //  过滤符合查找条件的对象
    //       this.newAnime = this.anime.filter(i => {
    //         return i.animeName.includes(newSearch)
    //       })
    //     }
    //   }
    // },
  //  采用计算数学computed来实现动态查找
    computed:{
      newAnime(){
        return this.anime.filter(i => {
          return i.animeName.includes(this.search)
        })
      }
    },
    methods:{
      upSort(){

      }
    }
  })
</script>

</body>
</html>